﻿/* CSS Document */
/* 右侧拖拽内容*/
.layout{ overflow-x:hidden; height:948px;}
.mainBox{ position:relative; height:100%;}
.mainBox img{ height:100%;}
.mapCover{ display:none; position:absolute; left:0 ;top:0; z-index:9; width:100%; height:948px; background:rgba(0,0,0,0.8);}
.mapCover.show{ display:block;}
.leftConWrap{position:absolute; top:3px; width:59%; height:944px;z-index:99;opacity: 0;transition: opacity .5s;}
.rightConWrap {position:absolute; top:3px; z-index:99; margin-left:100%;width:100%;height:820px; padding-left:10px; overflow-y:auto;}
.rightCon{  background:url(../images/common/dotBg.png) repeat; /*background:rgba(255,255,255,1); background:#262c39;*/}
.chartCon{}
.precessBox{ padding-bottom:20px;}
.preceChartBox{ padding-left:30px;}
.chartList{ font-size:0; overflow:hidden;}
.chartList.first .chartItem{border-top:1px solid #434956;}
.chartList .chartItem{display:inline-block; vertical-align:top; width:20%; height:290px;border-right:1px solid #434956;border-bottom:1px solid #434956;  box-sizing: border-box;}
.chartList .chartItem.last{border-right:none;}
.chartBox{ /*text-align:center;*/ padding-left:15px;}
.slideIcon{ position:absolute; top:50%;left:0; background:url(../images/icon/rightTri.png) left center no-repeat; width:30px; height:52px; margin-top:-8px; cursor:pointer;}
.autoflows .slidebtn{ position:fixed; top:50%;right:-50px; background:url(../images/icon/rightTri.png) left center no-repeat; width:30px; height:52px; margin-top:-8px; cursor:w-resize;}
.slideBox{ position: absolute; right:-370px; top:0; display:inline-block;vertical-align:top;  width:370px;}
/* 右侧拖拽内容 end*/

/* 圆环图表的 图例*/
.legendBox{ width:100%; font-size:12px; white-space:nowrap; margin-top:10px;}
.legendBox >.cirLeng{display:inline-block; vertical-align:top; text-align:left; color: #8794b3;padding-left:17px;margin-right:1%;}
/*.legendBox .cirLeng1{ display:inline-block; vertical-align:top; background:url(../images/common/cirLegIcon1.png) left center no-repeat; color:#8794b3; padding-left:20px;}
.legendBox .cirLeng2{ display:inline-block; vertical-align:top; background:url(../images/common/cirLegIcon8.png) left center no-repeat; color:#8794b3; padding-left:20px;}
.legendBox .cirLeng3{ display:inline-block; vertical-align:top; background:url(../images/common/cirLegIcon7.png) left center no-repeat; color:#8794b3; padding-left:20px;}*/
.legendBox .cirLegIcon1{ background:url(../images/common/cirLegIcon1.png) left center no-repeat; color:#8794b3; }
.legendBox .cirLegIcon2{ background:url(../images/common/cirLegIcon2.png) left center no-repeat; color:#8794b3; margin-left: 125px;}
.legendBox .cirLegIcon3{ background:url(../images/common/cirLegIcon3.png) left center no-repeat; color:#8794b3; }
.legendBox .cirLegIcon4{ background:url(../images/common/cirLegIcon4.png) left center no-repeat; color:#8794b3; }
.legendBox .cirLegIcon5{ background:url(../images/common/cirLegIcon5.png) left center no-repeat; color:#8794b3; }
.legendBox .cirLegIcon6{ background:url(../images/common/cirLegIcon6.png) left center no-repeat; color:#8794b3; }
.legendBox .cirLegIcon7{ background:url(../images/common/cirLegIcon7.png) left center no-repeat; color:#8794b3; }
.legendBox .cirLegIcon8{ background:url(../images/common/cirLegIcon8.png) left center no-repeat; color:#8794b3; }
.legendBox .cirLegIcon9{ background:url(../images/common/cirLegIcon9.png) left center no-repeat; color:#8794b3; }
.legendBox .cirLegIcon10{ background:url(../images/common/cirLegIcon10.png) left center no-repeat; color:#8794b3; margin-left: 80px;}
.legendBox .cirLegIcon11{ background:url(../images/common/cirLegIcon11.png) left center no-repeat; color:#8794b3; }
.legendBox  span{ display:inline-block; padding-left:7px; color:#fff;}
/* 图表标题*/
.conTit{ font-size:22px; color:#fff; line-height:40px; text-indent:30px;font-weight:normal;  white-space: nowrap;}
.chartTit{ font-size:12px; color:#96a5c8; text-indent:20px; font-weight:normal;}
.chartValue{ text-align:center; font-size:60px; color:#3399ff; margin-top:80px;}
.chartValue >span{ display:inline-block; vertical-align:bottom; line-height:30px; font-size:14px; color:#8794b3;}
.chartValue a{display:inline-block; vertical-align:top; border-radius:3px; color:#fff;width:50px; height:85px; line-height:85px; margin-right:2px;}
.chartValue .bgC1{ background: rgba(60,77,87,.5); }
.chartValue .bgC2{ background: rgba(54,80,86,.5); }
.chartValue .bgC3{ background: rgba(65,80,70,.5); }
.chartValue .bgC4{ background: rgba(77,73,70,.5); }
/* 去掉图表的背景*/
.chartBox .UCDChart.gray,.chartBox .UCDChart{ background:none !important;}
.chartBox .UCDChart.gray .Frags,.chartBox .UCDChart .Frags{ background:none !important; border-bottom-color: rgb(81, 85, 97);}
.chartBox .UCDChart.gray .Cords .yCord1 .dot,.chartBox .UCDChart.gray .Cords .mainCord .dot{ color:#8794b3;}
/*.chartBox .UCDChart .grid .gLine{border-top: 1px solid #8794b3;}
.chartBox .UCDChart .grid.gridY .gLine,.chartBox .UCDChart .grid.gridY .gLine.mainLine{  border-left: 1px solid #8794b3;}
*/
.chartBox .UCDChart .grid .gLine{border-top: 1px dashed rgb(81, 85, 97) !important;}
.chartBox .UCDChart .grid.gridY .gLine,.chartBox .UCDChart .grid.gridY .gLine.mainLine{  border-left: 1px dashed rgb(81, 85, 97);}
/*.chartBox .UCDChart.gray .Frags{border: 0px solid #8794b3;}*/
.chartBox label.text{ display: inline-block; color:#fff;}
/* 面积图表*/
.areaChartBox{width:100%; height:180px;}
.areaChartBox .chartBox .UCDChart.gray .Cords .yCord1 .dot,.areaChartBox .chartBox .UCDChart.gray .Cords .mainCord .dot{ color:#8794b3 !important;}
/* 圆环图表*/
.mine.cirChartBox{ width:100%; height:180px;}
.cirChartBox{ width:100%; height:250px; margin-top: -30px;}
.theirs.cirChartBox2{ width:100%; height:220px;}
.cirChartBox .UCDChart.Circle{ overflow:hidden;}
/* 柱状图表*/
.colChartBox{  width: 300px; height:200px; margin-right: 10px;}
.colChartBox .UCDChart .Frags .item{border-radius:0;}
/* 条形图表*/
.barChartBox{/* width:100%; */height:200px; padding-top:20px;  margin-right: 10px;}
.barChartBox .UCDChart .Frags .item{ border-radius:0;}
.barChartBox .UCDChart .Frags .item .subItem{border-radius:0;}
.barChartBox .UCDChart.gray .Cords .yCord1 .dot{ display:none;}
.barChartBox .UCDChart.gray .Frags{border: 0px solid #8794b3;}
/* 雷达图表*/
.radarInspChartBox{width:100%; height:220px;}
/* 折线图表*/
.lineChartBox{ width:80%; height:220px;}
.lineChartBox .legend{ left: 24px !important; width: 290px !important; height: 60px; background-image: url(../images/legend.png);}
.lineChartBox .legend svg{ display: none;}

/* 人物图片渐变效果*/
.peoIconBox{ position:relative; height:210px;visibility: hidden;opacity:0;height: 0;}
.peoIconBox .peoIcon{ position:absolute;-webkit-transform: scale(0); -webkit-transition: 2s;}
.peoIcon1{top:50px; left:50px; background:url(../images/common/fadeIcon1.png) center no-repeat; width:90px;height:90px;}
.peoIcon2{top:50px; background:url(../images/common/fadeIcon2.png) center no-repeat; width:78px;height:79px;}
.peoIcon3{top:50px; background:url(../images/common/fadeIcon3.png) center no-repeat; width:58px;height:58px;}
.peoIcon4{top:50px; left:50px; background:url(../images/common/fadeIcon4.png) center no-repeat; width:90px;height:90px;}
.peoIcon5{top:50px; background:url(../images/common/fadeIcon5.png) center no-repeat; width:78px;height:79px;}
.peoIcon6{top:50px; background:url(../images/common/fadeIcon6.png) center no-repeat; width:58px;height:58px;}
.peoIconBox.show{
	visibility: visible;
	opacity:1;
}
.peoIconBox.show .peoIcon1{-webkit-transform: scale(1); left:140px; top:45px;}
.peoIconBox.show .peoIcon2{-webkit-transform: scale(1); left:40px; top:30px;}
.peoIconBox.show .peoIcon3{-webkit-transform: scale(1); left:220px; top:110px;}
.peoIconBox.show .peoIcon4{-webkit-transform: scale(1); left:70px; top:100px;}
.peoIconBox.show .peoIcon5{-webkit-transform: scale(1); left:1px; top:84px;}
.peoIconBox.show .peoIcon6{-webkit-transform: scale(1); left:240px; top:10px;}

/* 人物图片渐变效果*/
/* 文字渐变样式*/
.cont{ height:100%; position: relative;visibility: hidden;opacity:0;height: 0;}
.cont .label { position: absolute; -webkit-border-radius: 50px;text-align: center; color: #FFF;-webkit-transform-origin: 0%; cursor: pointer;  -webkit-transform: scale(0) translate3d(120px,140px,0);  -webkit-transition-timing-function: ease;  /* -webkit-transition: all 2s ease; -webkit-transition-delay: 800ms; */   left: 120px;  top: 140px;  padding:0 12px;}
.cont .label1{font-size: 12px; height: 35px; line-height: 35px; background: rgba(48,131,215,.8); } 
.cont .label2{font-size: 12px; height: 20px; line-height: 20px; background: rgba(84,31,113,.8);} 
.cont .label3{font-size: 12px; height: 35px; line-height: 35px; background: rgba(171,49,52,.8); } 
.cont .label4{font-size: 12px; height: 35px; line-height: 35px; background: rgba(100,136,20,.8); } 
.cont .label5{font-size: 12px; height: 35px; line-height: 35px; background: rgba(48,186,20,.8); } 
.cont .label6{font-size: 12px; height: 35px; line-height: 35px; background: rgba(178,106,20,.8); } 
.cont .label7{font-size: 12px; height: 35px; line-height: 35px; background: rgba(138,106,20,.8); } 
.cont.show{
	visibility: visible;
	opacity:1;
}
.cont.show .label1{ transition-duration: 2000ms; -webkit-transform: scale(1) translate3d(0px, -60px, 0px); z-index: 99;}
.cont.show .label2{ transition-duration: 2000ms; -webkit-transform: scale(1) translate3d(-50px, -34px, 0px); z-index: 21;}
.cont.show .label3{ transition-duration: 2000ms; -webkit-transform: scale(1) translate3d(-44px, -90px, 0px);z-index: 21;}
.cont.show .label4{ transition-duration: 2000ms; -webkit-transform: scale(1) translate3d(123px, -20px, 0px); z-index: 21;}
.cont.show .label5{ transition-duration: 2000ms; -webkit-transform: scale(1) translate3d(50px, 25px, 0px); z-index: 21;}
.cont.show .label6{ transition-duration: 2000ms; -webkit-transform: scale(1) translate3d(-80px, 5px, 0px); z-index: 21;}
.cont.show .label7{ transition-duration: 2000ms; -webkit-transform: scale(1) translate3d(53px, -110px, 0px); z-index: 21;}
 /* 文字样式*/
 
/* 地图左侧点击的按钮*/
.outdoorBtn{ position: absolute; top:40px; left:30px; z-index:9;/* background:url(../images/outdoor.png) center no-repeat;*/ width:101px; height:49px;}
.outdoorBtn .switchButton{ width:93px; height:32px;}
.filetIcon{ position: absolute; bottom:30px; left:30px; background:url(../images/filtIcon.png) center no-repeat; width:48px; height:48px; cursor:pointer;}
/* 地图左侧list*/
.disList{ position:absolute; bottom:30px;  right:20px;}
.disList .disLi{ margin-bottom:10px; font-size:12px; color:#8794b3;}
.disList .disLi .cirLegIcon3{ display:inline-block; vertical-align:middle; background:url(../images/common/cirLegIcon3.png) left center no-repeat; width:20px; height:10px;}
.disList .disLi .cirLegIcon5{ display:inline-block; vertical-align:middle; background:url(../images/common/cirLegIcon5.png) left center no-repeat; width:20px; height:10px;}
.disList .disLi .cirLegIcon6{ display:inline-block; vertical-align:middle; background:url(../images/common/cirLegIcon6.png) left center no-repeat; width:20px; height:10px;}
.disList .disLi .cirLegIcon8{ display:inline-block; vertical-align:middle; background:url(../images/common/cirLegIcon8.png) left center no-repeat; width:20px; height:10px;}
/* 地图左侧list*/

/*泡泡图表*/
.popC{width:335px;height:216px;background:url(../images/cirIcon1.png) center no-repeat;}
.popC .pTop{width:100%;height:190px;position:relative;}
.popC .pInfo>p{position:absolute;font-size:12px;color:white;}
@-webkit-keyframes pInfo1{from {bottom:33px;opacity:0;} to{bottom:130px;opacity:1;}}
.popC .pInfo1{left:33px;}
.popC .pInfo1.on{-webkit-animation: pInfo1 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pInfo2{from {bottom:26px;opacity:0;} to{bottom:65px;opacity:1;}}
.popC .pInfo2{left:73px;}
.popC .pInfo2.on{-webkit-animation: pInfo2 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pInfo3{from {bottom:26px;opacity:0;} to{bottom:86px;opacity:1;}}
.popC .pInfo3{left:103px;}
.popC .pInfo3.on{-webkit-animation: pInfo3 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pInfo4{from {bottom:26px;opacity:0;} to{bottom:100px;opacity:1;}}
.popC .pInfo4{left:146px;}
.popC .pInfo4.on{-webkit-animation: pInfo4 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pInfo5{from {bottom:38px;opacity:0;} to{bottom:138px;opacity:1;}}
.popC .pInfo5{left:183px;}
.popC .pInfo5.on{-webkit-animation: pInfo5 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pInfo6{from {bottom:26px;opacity:0;} to{bottom:92px;opacity:1;}}
.popC .pInfo6{left:220px;}
.popC .pInfo6.on{-webkit-animation: pInfo6 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pInfo7{from {bottom:38px;opacity:0;} to{bottom:150px;opacity:1;}}
.popC .pInfo7{left:258px;}
.popC .pInfo7.on{-webkit-animation: pInfo7 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pInfo8{from {bottom:33px;opacity:0;} to{bottom:124px;opacity:1;}}
.popC .pInfo8{left:287px;}
.popC .pInfo8.on{-webkit-animation: pInfo8 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pop1{from {bottom: 0;opacity:0;} to{bottom:97px;opacity:1;}}
.popC .pop1{position:absolute;left:33px;bottom:0;width:32px;height:32px;background:url(../images/pop/pop1.png) no-repeat center;opacity:0;}
.popC .pop1.on{-webkit-animation: pop1 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pop2{from {bottom: 0;opacity:0;} to{bottom:40px;opacity:1;}}
.popC .pop2{position:absolute;left:72px;bottom:0;width:25px;height:25px;background:url(../images/pop/pop2.png) no-repeat center;opacity:0;}
.popC .pop2.on{-webkit-animation: pop2 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pop3{from {bottom: 0;opacity:0;} to{bottom:60px;opacity:1;}}
.popC .pop3{position:absolute;left:106px;bottom:0;width:25px;height:25px;background:url(../images/pop/pop3.png) no-repeat center;opacity:0;}
.popC .pop3.on{-webkit-animation: pop3 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pop4{from {bottom: 0;opacity:0;} to{bottom:75px;opacity:1;}}
.popC .pop4{position:absolute;left:146px;bottom:0;width:25px;height:25px;background:url(../images/pop/pop4.png) no-repeat center;opacity:0;}
.popC .pop4.on{-webkit-animation: pop4 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pop5{from {bottom: 0;opacity:0;} to{bottom:100px;opacity:1;}}
.popC .pop5{position:absolute;left:177px;bottom:0;width:37px;height:37px;background:url(../images/pop/pop5.png) no-repeat center;opacity:0;}
.popC .pop5.on{-webkit-animation: pop5 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pop6{from {bottom: 0;opacity:0;} to{bottom:67px;opacity:1;}}
.popC .pop6{position:absolute;left:220px;bottom:0;width:25px;height:25px;background:url(../images/pop/pop6.png) no-repeat center;opacity:0;}
.popC .pop6.on{-webkit-animation: pop6 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pop7{from {bottom: 0;opacity:0;} to{bottom:113px;opacity:1;}}
.popC .pop7{position:absolute;left:250px;bottom:0;width:37px;height:37px;background:url(../images/pop/pop7.png) no-repeat center;opacity:0;}
.popC .pop7.on{-webkit-animation: pop7 1s ease;-webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pop8{from {bottom: 0;opacity:0;} to{bottom:93px;opacity:1;}}
.popC .pop8{position:absolute;left:289px;bottom:0;width:31px;height:32px;background:url(../images/pop/pop8.png) no-repeat center;opacity:0;}
.popC .pop8.on{-webkit-animation: pop8 1s ease;-webkit-animation-fill-mode: forwards;}